<template>
    <view>
        <!--
此文件为开发者工具生成，生成时间: 2021/8/17 下午2:06:37
使用方法：
在 D:\project\miniapp-bank\zsnsh\pointsPkg\pages\pointsRecord\pointsRecord.wxml 引入模板

```
<import src="pointsRecord.skeleton.wxml"/>
<template is="skeleton" wx-if="{{loading}}" />
```

在 D:\project\miniapp-bank\zsnsh\pointsPkg\pages\pointsRecord\pointsRecord.wxss 中引入样式
```
@import "./pointsRecord.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
        <block name="skeleton">
            <view class="sk-container">
                <view class="main-container">
                    <view class="nav-container">
                        <text class="nav-item active sk-transparent sk-text-14-0000-685 sk-text sk-pseudo sk-pseudo-circle" data-search-type="0">本地积分</text>
                        <text class="nav-item sk-transparent sk-text-13-6364-216 sk-text" data-search-type="1">金融积分</text>
                    </view>
                    <view is="miniprogram_npm/@vant/weapp/popup/index">
                        <view is="miniprogram_npm/@vant/weapp/overlay/index">
                            <view is="miniprogram_npm/@vant/weapp/transition/index"></view>
                        </view>
                    </view>
                    <view class="order-list">
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-325 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-809 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-388 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-228 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-149 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-608 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-363 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-36 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-966 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-126 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-768 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-185 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-458 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-846 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-383 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-163 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-224 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-312 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-190 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-43 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-542 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-320 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-828 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-298 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-500 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                        <view class="order-item">
                            <view class="order-item-line2">
                                <text class="line2-left sk-transparent sk-text-14-2857-614 sk-text">营销活动-抽奖获取</text>
                                <view class="detail-item-right add-point sk-transparent sk-text-16-6667-735 sk-text" style="background-position-x: 100%">+10</view>
                            </view>
                            <view class="order-item-line3">
                                <view class="line3-left">
                                    <text class="sk-transparent sk-text-14-2857-218 sk-text">2021/08/17 10:54:09</text>
                                    <text class="green-type sk-transparent sk-text-18-4211-486 sk-text" style="border: none">本地积分</text>
                                </view>
                                <view class="line3-right">
                                    <text class="after-value sk-transparent sk-text-14-2857-821 sk-text">剩余:10积分</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="sk-loading"></view>
            </view>
        </block>
    </view>
</template>

<style>
/*
此文件为开发者工具生成，生成时间: 2021/8/17 下午2:06:37

在 D:\project\miniapp-bank\zsnsh\pointsPkg\pages\pointsRecord\pointsRecord.wxss 中引入样式
```
@import "./pointsRecord.skeleton.css";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
*/
.sk-transparent {
    color: transparent !important;
}
.sk-text-14-0000-685 {
    background-image: linear-gradient(transparent 14%, #eeeeee 0%, #eeeeee 86%, transparent 0%) !important;
    background-size: 100% 50rpx;
    position: relative !important;
}
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
}
.sk-text-13-6364-216 {
    background-image: linear-gradient(transparent 13.6364%, #eeeeee 0%, #eeeeee 86.3636%, transparent 0%) !important;
    background-size: 100% 44rpx;
    position: relative !important;
}
.sk-text-14-2857-325 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-809 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-388 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-228 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-149 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-14-2857-608 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-363 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-36 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-966 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-126 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-14-2857-768 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-185 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-458 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-846 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-383 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-14-2857-163 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-224 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-312 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-190 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-43 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-14-2857-542 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-320 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-828 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-298 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-500 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-14-2857-614 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-16-6667-735 {
    background-image: linear-gradient(transparent 16.6667%, #eeeeee 0%, #eeeeee 83.3333%, transparent 0%) !important;
    background-size: 100% 42rpx;
    position: relative !important;
}
.sk-text-14-2857-218 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-text-18-4211-486 {
    background-image: linear-gradient(transparent 18.4211%, #eeeeee 0%, #eeeeee 81.5789%, transparent 0%) !important;
    background-size: 100% 38rpx;
    position: relative !important;
}
.sk-text-14-2857-821 {
    background-image: linear-gradient(transparent 14.2857%, #eeeeee 0%, #eeeeee 85.7143%, transparent 0%) !important;
    background-size: 100% 33.6rpx;
    position: relative !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
    background: #efefef !important;
    background-image: none !important;
    color: transparent !important;
    border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
    border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
    border-radius: 50% !important;
}
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
}

@keyframes flush {
    0% {
        left: -100%;
    }
    50% {
        left: 0;
    }
    100% {
        left: 100%;
    }
}
.sk-loading {
    animation: flush 2s linear infinite;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0) 100%);
}
</style>
